<template>
  <div class="yibiao">
    <!--   1. 头部-->
    <ConTitle :topTitle="topTitle"/>
    <!--    2. 设备概览、监控、公告-->
    <gailan :flag="flag"/>
<!--    3.图表-->
    <div class="chart-con">

      <el-card class="box-card chart-card">
        <div slot="header" class="clearfix">
          <span>空气湿度</span>
        </div>
        <div class="chartArea" ref="chart1"></div>
      </el-card>

      <el-card class="box-card chart-card">
        <div slot="header" class="clearfix">
          <span>光照</span>
        </div>
        <div class="chartArea" ref="chart2"></div>
      </el-card>

      <el-card class="box-card chart-card">
        <div slot="header" class="clearfix">
          <span>气压</span>
        </div>
        <div class="chartPress" ref="chart3"></div>
      </el-card>

      <el-card class="box-card chart-card">
        <div slot="header" class="clearfix">
          <span>土壤湿度</span>
        </div>
        <div class="chartPress" ref="chart4"></div>
      </el-card>
    </div>
  </div>
</template>

<script>
//引入组件
import gailan from "@/components/gailan";
import ConTitle from "@/components/ConTitle";
//2.调用后台接口
import {$sensorCount} from "@/api/index.js";

export default {
  name: "dashboard",
  components: {
    gailan,ConTitle,
  },
  data() {
    return {
      flag: true,
      topTitle:{
        type:"",
        text:"仪表盘",
        msg:"设备概览和传感数据可视化"
      },
    }
  },
  mounted() {
    //获取图标数据
    $sensorCount().then(res => {
      console.log(111,res.data.data);
      this.drawAir(res.data.data);
    });
  },
  methods: {
    //画图表
    drawAir(data){
      //初始化
      let  chart1 = this.$echarts.init(this.$refs.chart1);
      let  chart2 = this.$echarts.init(this.$refs.chart2);
      let  chart3 = this.$echarts.init(this.$refs.chart3);
      let  chart4 = this.$echarts.init(this.$refs.chart4);
      //设置option
      let option1 = {
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: data.air,
            type: 'line',
            smooth: true
          }
        ]
      };
      let option2 = {
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: data.beam,
            type: 'bar'
          }
        ]
      };
      let option3 = {
        legend: {
          top: 'bottom'
        },
        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        series: [
          {
            name: 'Nightingale Chart',
            type: 'pie',
            radius: [10, 70],
            center: ['50%', '50%'],
            roseType: 'area',
            itemStyle: {
              borderRadius: 8
            },
            data: data.pressure
          }
        ]
      };
      let option4 = {
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: data.soil,
            type: 'line',
            smooth: true
          }
        ]
      };
      //画图
      ////空气湿度图
      chart1.setOption(option1);
      //光照图
      chart2.setOption(option2);
      //气压图
      chart3.setOption(option3);
      //土壤湿度图
      chart4.setOption(option4);
    },
  }
}
</script>

<style scoped lang="scss">
/*
.yibiao {
  width: 99.5%;
  margin-left: 5px;
}

.yibiao_top {
  width: 100%;
  height: 40px;
  line-height: 40px;
  background: white;
  margin-bottom: 8px;
  text-indent: 1em;
}

.yibiao_middle {
  width: 100%;
  height: 120px;
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}

.yibiao_middle .middle_left {
  width: 55%;
  height: 100%;
  background: white;
}

.yibiao_middle .middle_middle, .yibiao_middle .middle_right {
  width: 21.5%;
  height: 100%;
  background: white;
}

.yibiao_bottom {
  width: 100%;
  height: 250px;
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}

.yibiao_bottom .bottom_left, .yibiao_bottom .bottom_right {
  width: 49.5%;
  height: 100%;
  background: white;
}

.yibiao_bottom1 {
  width: 100%;
  height: 250px;
  display: flex;
  justify-content: space-between;
}

.yibiao_bottom1 .bottom_left, .yibiao_bottom1 .bottom_right {
  width: 49.5%;
  height: 100%;
  background: white;
}
*/
/*.yibiao_top {
  margin-bottom: 10px;

  .top_title {
    font-size: 18px;
    font-weight: bold;
  }
}*/

/*.yibiao_middle {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

.yibiao_middle .middle_left {
  width: 52%;
  height: 100%;
  background: white;

  .zhonxia {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: bold;
    font-size: 14px;
  }

  .num {
    font-size: 20px;
  }

  .line1 {
    width: 2px;
    height: 80px;
    background: #e9eef6;
  }

  .line {
    width: 2px;
    height: 40px;
    background: #e9eef6;
  }

  .zhonxia .img1 {
    width: 40px;
    height: 70px;
  }

  .zhonxia .img2 {
    font-size: 40px;
    color: #91a8bf;
    transform: rotate(180deg);
  }
}

.yibiao_middle .middle_middle {
  width: 23%;
  background: white;
  .low{
    display: flex;
    justify-content: space-between;
    margin-top: 5px;
    font-weight: bold;
    font-size: 14px;
    .s1{
      width: 40px;
      color: #6b8c4b;
      background: #ddf0e0;
      border-radius: 10px;
      display: inline-block;
      text-align: center;
    }
    .s2{
      width: 40px;
      color: #ec464e;
      background: #fbdadb;
      border-radius: 10px;
      display: inline-block;
      text-align: center;
    }
  }
}

.yibiao_middle .middle_right {
  width: 23%;
  background: white;
  .la{
    display: flex;
    justify-content: space-between;
    margin-top: 5px;
    font-size: 12px;
    i{
      color: #7edc7c;
    }
  }
}*/

.chart-con {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  .chart-card {
      width: 45%;
    flex-grow: 1;
  }
  .chart-card:nth-of-type(1),.chart-card:nth-of-type(3){
    margin-right: 10px;
  }
  .chart-card:nth-of-type(3),.chart-card:nth-of-type(4){
    margin-top: 10px;
  }
}
.chart-card .chartArea{
  height: 200px;
}
.chart-card .chartPress{
  height: 220px;
}
</style>